import React, { Component,useState,useEffect } from 'react';

const View = (props) =>{
    // 声明一个叫 “count” 的 state 变量。



    // this.state = {
    //     age:33,
    //     listData:[],
    //     name:'元芳',
    //     count:0,
    //     pddApiCfg:{
    //         page_size:10,
    //         page_number:1
    //     },
    //     resume:{
    //         base:{
    //
    //         },
    //         exp:{
    //
    //         }
    //     }
    // }
    const cfg = {
        resume:{
            base:{

            },
            exp:{

            }
        },
        pddApiCfg:{
            page_size:10,
            page_number:1
        }
    }
    // pddApiCfg
    const [resumeObj, setResumeObj] = useState(cfg.resume)
    const [pddApiCfg, setPddApiCfg] = useState(cfg.pddApiCfg);

    // resumeObj == this.state.resumeObj; 无值，只是单纯的定义
    // useState == this.state.resumeObj = 值; 值，被赋上初始值

    // setResumeObj == this.setState({})
    // setResumeObj == this.setState(()=>{
    //
    // })
    // setResumeObj == this.setState({
    //     listData:data1
    // })

    // setResumeObj(data1)
    // setPddApiCfg(data2)



    // {count}
    // {this.state.count}
    // this.state = {
    //     count:0
    // }
    // this.setState({
    //     count:
    // })
    // this.setState((state)=>{
    //     count:state.count+1
    // })
    // setCount(count+1)
    // const [count, setCount] = useState(1);

    // const [test, setTest] = useState(0);

    // const [name, setName] = useState('小明');
    //
    // const [list, setList] = useState([])
    // function onFn(){
    //     console.log('点击一个事件')
    // }
    // document.getElementById('id').onclick = onFn();
    // document.getElementById('id').onclick = onFn;
    // document.getElementById('id').onclick = function(){
    //     console.log('点击一个事件')
    // }
    const [age, setAge] = useState(33);

    const [listData, setListData] = useState([]);

    const [name, setName] = useState('元芳');

    const [count, setCount] = useState(0);

    function changeInfo(){
        setName('小红');
    }
    const changeInfos = (name='新小明',age=20)=>{
        setName(name);
        setAge(age);
        console.log('更改了信息');
    }
    // changeInfos();
    useEffect(()=>{
        document.title = `这个人是：${name}+${age}`;
    })
    useEffect(()=>{
        // changeInfos();
        setTimeout(()=>{
                changeInfos('定时器',19);
        },3000)
        // componentDidMount
        // componentDidUpdate
        return ()=>{
            // componentWillUnmount
            // console.log("componentWillUnmount");
        }
    })
    return(
        <React.Fragment>
            <div>2</div>
            这个页面的state的值为 -----count{count}
            <input onClick={()=>{setCount(count+1)}} type="button" value="点击"/>
            <br/>你的年龄是：{age}
            <br/>你的名字是：{name}
            <br/><input type="button" onClick={()=>{setName('小明')}} value="换个名字"/>&nbsp;&nbsp;&nbsp;
            <input type="button" onClick={changeInfo} value="换个信息"/>&nbsp;&nbsp;&nbsp;
            <input type="button" onClick={()=>{changeInfos('小七',28)}} value="换更多信息"/>
        </React.Fragment>
    )
}





export default View;
